<script setup>
import { ref } from 'vue';
import {Delete,Edit} from '@element-plus/icons-vue'
import breadCrumb from '../head/breadCrumb.vue';

const status = ref(true)

const tableData = ref([{
    menuName: '系统管理',
    icon: '*',
    permission: '',
    route: 'system',
    componentPath: 'Layout',
    order: '1',
    status: true,
    createTime: '2021-05-31 18:05:37',
    children:[
        {
            menuName: '用户管理',
            icon: '*',        
            permission: '',
            route: 'sysUser',
            componentPath: 'system/sysUser/list',
            order: '1',
            status: true,
            createTime: '2021-05-31 18:05:37',
        },
        {
            menuName: '角色管理',
            icon: '*',        
            permission: '',
            route: 'sysRole',
            componentPath: 'system/sysRole/list',
            order: '2',
            status: true,
            createTime: '2021-05-31 18:05:37',
        },
        {
            menuName: '菜单管理',
            icon: '*',        
            permission: '',
            route: 'sysMenu',
            componentPath: 'system/sysMenu/list',
            order: '3',
            status: true,
            createTime: '2021-05-31 18:05:37',
        },
        {
            menuName: '部门管理',
            icon: '*',        
            permission: '',
            route: 'sysDept',
            componentPath: 'system/sysDept/list',
            order: '4',
            status: true,
            createTime: '2021-05-31 18:05:37',
        },
        {
            menuName: '岗位管理',
            icon: '*',        
            permission: '',
            route: 'sysPost',
            componentPath: 'system/sysPost/list',
            order: '5',
            status: true,
            createTime: '2021-05-31 18:05:37',
        },
    ]
  },{
    menuName: '审批设置',
    icon: '*',
    permission: '',
    route: 'processSet',
    componentPath: 'Layout',
    order: '1',
    status: true,
    createTime: '2022-12-01 09:32:46',
    children:[
        {
            menuName: '审批模板',
            icon: '*',        
            permission: '',
            route: 'processTemplate',
            componentPath: 'processSet/processTemplate/list',
            order: '2',
            status: true,
            createTime: '2022-12-01 09:37:08',
        },{
            menuName: '审批类型',
            icon: '*',        
            permission: '',
            route: 'processType',
            componentPath: 'processSet/processType/list',
            order: '1',
            status: true,
            createTime: '2022-12-02 14:46:18',
        }
    ]
  },{
    menuName: '审批管理',
    icon: '*',
    permission: '',
    route: 'processMgr',
    componentPath: 'Layout',
    order: '1',
    status: true,
    createTime: '2022-12-02 14:48:11',
    children:[
        {
            menuName: '审批列表',
            icon: '*',        
            permission: '',
            route: 'process',
            componentPath: 'processMgr/process/list',
            order: '1',
            status: true,
            createTime: '2022-12-02 14:49:06',
        }
    ]
  },{
    menuName: '公众号菜单',
    icon: '*',
    permission: '',
    route: 'wechat',
    componentPath: 'Layout',
    order: '1',
    status: true,
    createTime: '2022-12-13 09:06:58',
    children:[
        {
            menuName: '菜单列表',
            icon: '*',        
            permission: '',
            route: 'menu',
            componentPath: 'wechat/menu/list',
            order: '1',
            status: true,
            createTime: '2022-12-13 09:07:52',
        }
    ]
  }])

  
const loading = ref(false)

</script>

<template>
    <!-- 顶部导航栏 -->
    <breadCrumb></breadCrumb>
    
    <!-- 中间表 -->
<el-row>
    <el-col span="20">
        <el-button type="success" @click="handleAdd">十 添加</el-button>
    </el-col>
</el-row>
        
<div>
    <el-table :data="tableData" border style="width: 100%" row-key="menuName" default-expand-all>
    <el-table-column prop="menuName" label="菜单名称" width="180" />
    <el-table-column prop="icon" label="图标" />
    <el-table-column prop="permission" label="权限标识" />
    <el-table-column prop="route" label="路由地址" />
    <el-table-column prop="componentPath" label="组件路径" />
    <el-table-column prop="order" label="排序" />
    <el-table-column prop="status" label="状态" ><el-switch v-model="status" /></el-table-column>
    <el-table-column prop="createTime" label="创建时间" width="180"/>
    <el-table-column label="操作" width="180">
        <template #default="{row}">
          <el-button type="success" size="small" @click="handleDelete(row)">+</el-button>
          <el-button type="primary" :icon="Edit" size="small" @click="handleEdit(row)"></el-button>
          <el-button type="danger" :icon="Delete" size="small" @click="handleDelete(row)"></el-button>
        </template>
      </el-table-column>
  </el-table>
  </div>
</template>

<style scoped>
.el-row{
    border: 1px solid rgb(243, 236, 236);
    margin-bottom: 10px;
}
.el-button{
    margin: 5px;
    font-size: small;
}
</style>